<template>
	<div class="page">
		<global-header title="打盘设置" @back="$router.back()" />
		<main class="page-main">
			<div class="header-wrap">
				<div class="header-nav">
					<div class="item">
						<div class="item-box"> 今日打盘总量
							<span>{{ configState.Config.ToDayTotalCount.toFixed(2) }}</span>
						</div>
					</div>
					<div class="item">

						<div class="item-box"> 今日打盘总额 <span>{{ configState.Config.ToDayTotalCoin.toFixed(2) }}</span></div>
					</div>
					<div class="item">
						<div class="item-box"> 打盘成功 <span class="span2">{{ configState.Config.SuccessCount.toFixed(2) }}</span>
						</div>
					</div>
					<div class="item">
						<div class="item-box"> 打盘失败 <span>{{ configState.Config.FailedCount.toFixed(2) }}</span> </div>
					</div>
				</div>
				<div class="header-tips"> 备注：请将打盘密码填写在打盘助手同步设置中，用
					于同步游戏状态和获取订单。 </div>
				<div class="header-copy">
					<div class="copy-left">打盘密码</div>
					<div class="copy-center">
						<!-- {{ configState.Config.FdPwd }} -->
						<van-field v-model="FdPwd" class="field" disabled />
					</div>
					<div class="copy-right" @click="copyePwd(FdPwd)"> 复制</div>
				</div>
			</div>
			<div class="options">
				<van-radio-group v-model="Type">
					<div class="item">
						<div class="item-left">实时飞</div>
						<div class="item-right"><van-radio :name="1" @click="setConfig(1)"> </van-radio></div>
					</div>
					<div class="item">
						<div class="item-left">距离封盘 <van-field v-model="configState.Config.Second" class="options-field" /> 秒飞</div>
						<div class="item-right"><van-radio :name="0" @click="setConfig(0)"> </van-radio></div>
					</div>
				</van-radio-group>
			</div>
			<div class="list-wrap">
				<div class="list-top">游戏开关设置</div>
				<div class="list">
					<div class="item" v-for="(item, index) in list" :key="index">
						<div class="item-left">
							<img class="img" :src="lotteryLogo(item.LotteryId)" alt="">
							{{ item.Name }}
						</div>
						<div class="item-right">
							<div class="one">{{ item.CurrentBitchNo }}</div>
							<van-switch class="!text-[22px]" v-model="item.Status" :active-value="1" :inactive-value="0"
								@change="switchUpdate(item)" />
						</div>
					</div>
				</div>
			</div>

		</main>
	</div>
</template>
<route>
  {
    name: "flyalone",
    meta: {
      pageIndex: 3,
    }
  }
</route>

<script setup lang="ts">
import { cloneDeep, debounce } from "lodash-es";
import { toast } from "@/utils/toast";
import { reqDapanConfig, reqDapanConfigEdit } from "@/api/flyalone";
import { handleCopy } from "@/hooks/useUtils";
import { lotteryLogo } from "@/utils/game";

const FdPwd = ref('')
const Type = ref(0)
const list = ref<DapanConfig["GameList"]>([]);
let configState = ref<DapanConfig>({
	Config: {
		FdPwd: "",
		Game: "",
		Id: 0,
		RoomId: 0,
		Second: 0,
		Type: 0,
		ToDayTotalCount: 0,
		ToDayTotalCoin: 0,
		SuccessCount: 0,
		FailedCount: 0
	},
	GameList: [],
}


);
const copyePwd = (pwd: string) => {
	handleCopy(pwd)
}
const getConfig = async () => {
	const res = await reqDapanConfig()
	if (res.code === 200) {
		configState.value = res.data
		FdPwd.value = res.data.Config.FdPwd
		Type.value = configState.value.Config.Type
		// list.value = res.data.GameList
		list.value = cloneDeep(res.data.GameList || []);

	}
};
const setConfig = async (flag: number,) => {
	const res = await reqDapanConfigEdit({
		Game: '',
		Id: 1,
		Second: +configState.value.Config.Second,
		Type: flag
	})
	if (res.code === 200) {
		toast.info("设置成功");
		getConfig()
	}
}
const switchUpdate = async (val: any) => {
	let arr1 = list.value.filter((item) => {
		return item.Status == 1
	})
	let GameArrId = arr1.map((item) => `{${item.LotteryId}}`).join("");
	const loading = toast.loading();
	const res = await reqDapanConfigEdit({
		Id: 1,
		Type: Type.value,
		Game: GameArrId,
		Second: +configState.value.Config.Second
	})
	if (res.code === 200) {
		loading.close();
		toast.info("设置成功");
		getConfig()
	} else {
		loading.close();
	}

};
onMounted(() => {
	getConfig()
})
</script>
<style scoped lang="scss">
.header-wrap {
	background: #FFFFFF;
	width: 100%;

	.header-nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			height: 41px;
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: visible;
			border-bottom: 1px solid #E4E4E4;

			.item-box {
				border-right: 1px solid #E4E4E4;
				height: 21px;
				font-weight: 500;
				font-size: 14px;
				color: #111111;
				text-align: center;
				margin: 0 auto;
				width: 100%;

				span {
					height: 40px;
					font-weight: 500;
					font-size: 14px;
					color: #3976CC;
					line-height: 0px;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.span2 {
					color: #80BB76;
				}

			}

		}


	}

	.header-tips {
		margin-top: 10px;
		margin-left: 15px;
		width: 324px;
		height: 50px;
		background: #F6F9FE;
		border-radius: 10px 10px 10px 10px;
		padding: 5px 12px;
		font-weight: 500;
		font-size: 14px;
		color: #3976CC;
		text-align: left;
		font-style: normal;
		text-transform: none;
		line-height: 26px;
	}

	.header-copy {
		padding: 5px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;


		.copy-left {

			width: 56px;
			height: 100%;
			font-weight: 500;
			font-size: 14px;
			color: #000721;
			text-align: left;
			font-style: normal;
			text-transform: none;
			display: flex;
			align-items: center;
		}

		.copy-center {
			width: 182px;
			height: 40px;
			background: #FFFFFF;
			border-radius: 5px 5px 5px 5px;
			border: 1px solid #E4E4E4;
			font-weight: 500;
			font-size: 14px;
			color: #000721;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 14px;
			color: #E4E4E4;

			.field {
				width: 182px;
				height: 40px;
				color: #000721;
				border-radius: 5px 5px 5px 5px;
				border: 1px solid #E4E4E4;
			}

		}

		.copy-right {
			width: 68px;
			height: 40px;
			background: #F1F4FB;
			border-radius: 5px 5px 5px 5px;
			border: 1px solid #3976CC;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 14px;
			color: #3976CC;
			line-height: 0px;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}
}

.options {

	width: 375px;
	height: 100px;
	background: #fff;
	border-radius: 0px 0px 0px 0px;
	margin-top: 15px;
	margin-bottom: 10px;

	.item {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 16px;
		margin-right: 16px;
		font-weight: 500;
		font-size: 14px;
		color: #000721;
		line-height: 0px;
		text-align: left;
		font-style: normal;
		text-transform: none;

		.item-left {
			display: flex;
			align-items: center;

			.options-field {
				width: 50px;
				height: 40px;
				background: #FFFFFF;
				border-radius: 5px 5px 5px 5px;
				border: 1px solid #E4E4E4;
				margin: 0 10px;
			}
		}


	}

	.item:nth-child(1) {
		border-bottom: 1px solid #E4E4E4;
	}
}

.list-wrap {
	width: 375px;
	background: #FFFFFF;

	.list-top {

		border-radius: 0px 0px 0px 0px;
		padding: 13px 23px;
		font-weight: 500;
		font-size: 14px;
		color: #888888;
	}

	.list {
		.item {
			height: 50px;
			margin: 0 15px;
			border-top: 1px solid #E4E4E4;
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 15px;
			color: #111111;

			.item-left {
				width: 50%;
				display: flex;
				align-items: center;

				.img {
					margin-right: 13px;
					width: 25px;
					height: 25px;
					border-radius: 50%;
				}
			}

			.item-right {
				width: 50%;
				display: flex;
				height: 25px;
				justify-content: space-between;
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>
